<template>
  <div class="homePic" :class="personInfoClass">
    <div class="portrait"></div>
    <p class="signature">细节决定成败</p>
    <div class="enter">
      <div class="enter-border1"></div>
      <div class="enter-border2"></div>
      <div class="text">
        <span @click="enter">Enter</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 窗口宽度
      windowWidth: document.documentElement.clientWidth
    }
  },
  computed: {
    // 判断屏幕宽度
    personInfoClass() {
      if (this.windowWidth >= 1080) {
        return 'PC_layout'
      } else if (this.windowWidth < 1080 && this.windowWidth >= 812) {
        return 'middle_layout'
      } else {
        return 'mobile_layout'
      }
    }
  },
  watch: {
    // 监听屏幕宽度
    '$store.state.screenWidth': function(val) { // 监听屏幕宽度变化
      this.windowWidth = val
    }
  },
  methods: {
    enter() {
      this.$router.push('/Blog')
      this.$emit('changeIsActive', 'toBlog')
    }
  }
}
</script>

<style lang="less" scoped>
.homePic {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/homePhotos.png");
  background-size: 100% 100%;
  .portrait {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url("../assets/portrait.png");
    background-size: 100% 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .signature {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 35%;
    height: 50px;
    background-color: #161e27;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    letter-spacing: 2.5px;
    color: #fff;
  }
  .enter {
    position: absolute;
    top: 70%;
    left: 50%;
    text-align: center;
    line-height: 50px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    color: #161e27;
    letter-spacing: 1px;
    .text {
      position: relative;
      width: 100px;
      height: 50px;
      background-color: #fff;
      z-index: 99;
      span {
        animation: enterAnimate 1s linear infinite alternate;
      }
    }
    .enter-border1,
    .enter-border2 {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: #24283b;
      z-index: 9;
    }
    .enter-border1 {
      top: -10%;
      left: -6%;
    }
    .enter-border2 {
      top: 53%;
      left: 76%;
    }
  }
}
.mobile_layout {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/homePhotos2.png");
  background-size: 100% 100%;
}
// css动画
@keyframes enterAnimate {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
</style>
